<template>
  <div id="production_eChart">

  </div>
</template>

<script>
  import data from '../../../apiData/statistics/production.js'
  export default {
    name: "production_eChart",
    data() {
      return {
        myChart: null,
        data: {}
      }
    },
    created() {
      this.data = data;
      this.$nextTick(() => {
        this.drawChart()
      })
    },
    methods: {
      drawChart() {
        // 基于准备好的dom，初始化eCharts实例
        if(this.myChart !== null && this.myChart !== '' && this.myChart !== undefined) {
          this.myChart.dispose();  // 销毁
        }
        this.myChart = this.$echarts.init(document.getElementById('production_eChart'));
        const colors = ['#b37feb', '#ffab2b', '#1890ff', '#00c050'];
        let option = {
          color: colors,
          tooltip: {
            trigger: 'axis',
            backgroundColor:'rgba(0,0,0,0.6)',
            borderColor: 'rgba(0,0,0,0)',
            textStyle:{
              color:'#ddd',
              fontSize:13
            }
          },
          grid: {
            // right: '20%'
          },
          toolbox: {
            feature: {
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['商品浏览量', '商品访客量', '支付金额', '退款金额']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: { interval: 0, rotate: 30 },
              data: this.data.xAxis
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '金额',
              position: 'left',
              axisLine: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(102,102,102,0.2)'
                }
              },
              axisLabel: {
                formatter: '{value}'
              }
            },
            {
              type: 'value',
              name: '商品浏览量',
              position: 'right',
              axisLine: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(102,102,102,0.2)'
                }
              },
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: this.data.series
        };
        option && this.myChart.setOption(option);
      }
    }
  }
</script>

<style scoped lang="scss">
  #production_eChart {
    margin-top: 10px;
    width: 100%;
    height: 440px;
    /*border: 1px solid red;*/
  }
</style>
